<template>
  <layout-slot>
    <article class="main-content page-page">
      <div class="post-header">
        <h1 class="post-title" itemprop="name headline">
          {{ pageInfo.title }} </h1>
        <div class="post-data">
          <time datetime="2020-04-27T23:04:00+08:00" itemprop="datePublished"><i class="fa fa-clock-o"
                                                                                 aria-hidden="true"> </i> {{ pageInfo.date |  dateFormat('{y}-{m}-{d}') }}
          </time>&nbsp;&nbsp; <i class="fa fa-comments-o" aria-hidden="true"></i> <a href="#comments"> {{ comments }} 评论</a>&nbsp;&nbsp;
          <i class="fa fa-eye" aria-hidden="true"></i> {{ pageInfo.view }} 浏览
        </div>
      </div>
      <div>
        <p><strong>网抑云歌单</strong></p>
        <aplayer style="margin-left: 0" :audio="audio" :lrcType="3" />
<!--        <p><strong>网抑云歌单</strong></p>-->
<!--        <aplayer style="margin-left: 0" :audio="audio1" :lrcType="3" />-->
      </div>
      <div id="post-content" class="post-content" v-html="pageInfo.intro"></div>
    </article>
    <Message/>
  </layout-slot>
</template>

<script>
  import LayoutSlot from "@/views/skins/GreenBook/slot/layout-slot";
  import {getMoviesDetail, recordCount} from "@/api/home";
  import Message from "@/components/Twikoo";
  import {mapState} from "vuex";

  export default {
    name: "music",
    components: {Message, LayoutSlot},
    beforeDestroy() {
      this.audio = {}
    },
    data(){
      return{
        pageInfo:{},
        audio: {
          name: 'MASAYUME CHASING',
          artist: 'BoA',
          url: 'https://cdn.zipblog.top/BOA%20Masayume%20Chasing.mp3',
          cover: 'https://p2.music.126.net/zZtUDuWk6qIe3ezMt4UMjg==/109951165796417308.jpg?param=128x128',
          // lrc: 'https://cdn.zipblog.top/lrc/Masayume%20Chasing-MusicEnc.lrc',
        },

        //https://www.musicenc.com/article/49763.html

        //https://www.lrcgeci.com/geshou/22358.html
        // audio1: {
        //   name: 'MASAYUME CHASING',
        //   artist: 'BoA',
        //   url: 'https://cdn.zipblog.top/BOA%20Masayume%20Chasing.mp3',
        //   cover: 'https://p2.music.126.net/zZtUDuWk6qIe3ezMt4UMjg==/109951165796417308.jpg?param=128x128',
        //   lrc: '',
        // },
      }
    },
    computed:{
      ...mapState({
        comments:state => state.comments
      })
    },
    methods:{
      getPageInfo(){
        this.$store.commit("setLoading",true)
        getMoviesDetail({path: "/music"}).then(({data}) => {
          this.pageInfo ={
            intro:data.data.articleContent,
            date:data.data.articleUpdated,
            view:data.data.articleViewCount,
            comments:data.data.articleCommentCount,
            title:data.data.articleTitle
          }
          // 记录浏览量
          recordCount({id: data.data.oId}).then((res) => {
          })
          this.$store.commit("setLoading",false)
        })
      }
    },
    mounted() {
      this.getPageInfo()
    }
  }
</script>

<style scoped>

</style>
